<template>
	<div class="login-page">
    <m-header class="header">
      <div slot="middle" class="tab">
        <span>手机号登陆</span>
      </div>
      <div slot="left" @click="$router.go(-1)">
        <i class="iconfont icon-xiangzuo" />
      </div>
    </m-header>
		<div class="inner">
			<span class="tip"></span>
			<div class="input-warpper border-1px-bottom">
				<van-field
					v-model="password"
					clearable
					placeholder="请输入密码"
					class="field"
					type="password"
					autofocus
				/>
			</div>
			<van-button :loading='loading' :disabled='disabled ' round type="danger" size="small" block @click="login">登陆</van-button>
		</div>
	</div>
</template>

<script>
import MHeader from 'base/m-header'
import { setUser } from '@/utils/cache'
import { cellphone } from 'api/login'

export default {
	components: {
		MHeader
	},
	data() {
		return {
			loading: false,
			password: ''
		}
	},
	mounted() {
		let { phone } = this.$route.params
		if (!phone) {
			this.$router.replace('login')
			return
		}
		this.phone = phone
	},
	computed: {
		disabled() {
			return this.password.length === 0
		}
	},
	methods: {
		login() {
			cellphone(this.phone, this.password).then(res =>{
				if (res.code !== 200) {
					this.$toast('用户名或密码错误')
					return
				}
				let { account, profile } = res
				setUser(Object.assign(account, profile))
				this.$router.replace('/discovery')
			})
		}
	}
}
</script>
<style lang="less" scoped>
@import './style/index.less';
</style>